<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>知识点分析比对</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui-v2.5.6\layui\css\layui.css" media="all">
    <script src="layui-v2.5.6\layui\layui.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap\bootstrap.min.css"/>
    <script src="bootstrap\jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap\popper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap\bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="vue\axios.js"></script>
    <script src="vue\Vue.js"></script>
</head>
<body>


<div id="app" class="container" style="margin-top: 50px">
    <table class="table table-striped text-center table-hover table-bordered text" id="table">
        <thead>
        <tr class="text-info" style="font-size: 12px;">
            <th>学校</th>
            <th>届</th>
            <th>学科</th>
            <th>知识点</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody class="text-muted" style="font-size: 12px;">
        <tr>
            <td>
                <div class="layui-form">
                    <select name="school" style="width: 190px;height:38px" lay-filter="school_type">
                        <option value="">请选择学校</option>
                        <option :value="school.sname" v-for="school in schools.data">{{school.sname}}</option>
                    </select>
                </div>
            </td>
            <td>
                <div class="layui-form">
                    <select name="semester" style="width: 190px;height:38px" lay-filter="semester_type">
                        <option value="">请选择届</option>
                        <option :value="semester.beginyear" v-for="semester in semesters.data">{{semester.beginyear}}
                        </option>
                    </select>
                </div>
            </td>
            <td>
                <div class="layui-form">
                    <select name="subject" style="width: 190px;height:38px" lay-filter="subject_type">
                        <option value="">请选择届</option>
                        <option :value="subject" v-for="subject in subjects.data">{{subject}}</option>
                    </select>
                </div>
            </td>
            <td>
                <div class="layui-form">
                    <div class="layui-form-item">
                        <select name="knowledges" style="width: 190px;height:38px" id="knowledges"
                                lay-filter="knowledges_type">
                            <option value="">请选择对应的知识点</option>
                        </select>
                    </div>
                </div>
            </td>
            <td>
                <button class="btn btn-info btn-sm">查看</button>
            </td>
        </tr>
        </tbody>
    </table>


</div>

<script>


    new Vue({
        el: "#app"
        , data: {
            schools: [],
            semesters: [],
            subjects: [],
        }
        , mounted() {
            axios
                .get("/classdeans/analyze/semesterAll")
                .then(res => {
                    this.semesters = res.data;
                });
            axios
                .get("/classdeans/analyze/subjectAll")
                .then(res => {
                    this.subjects = res.data;
                });
            axios
                .get("/classdeans/analyze/schoolAll")
                .then(res => {
                    this.schools = res.data;
                });
            axios
                .get("/classdeans/analyze/All")
                .then(res => {
                    console.info(res)
                })
        }
        //一但（dom）数据变动，就会触发该机制
        , updated: function () {
            layui.use('form', function () {

                var form = layui.form;
                form.on('select(subject_type)', function (data) {
                    var subject = data.value;
                    if (subject == "") {
                        subject = null;
                    }
                    $.ajax({
                        url: '/classdeans/analyze/knowledgeAll/' + subject
                        , type: 'get'
                        , dataType: 'json'
                        , success: function (data) {
                            if (data.code != 200) {
                                alert("所属科目下没有知识点")
                            }
                            $("#knowledges").empty();
                            for (var i = 0; i < data.data.length; i++) {
                                var item = data.data[i];
                                $("#knowledges").append("<option value=" + item.kpId + " id='knowledge' >" + item.kdname + "</option>");
                            }
                            form.render("select");
                        }
                    });

                });
                form.on('select(school_type)', function (data) {
                    console.info(data);
                });
                form.on('select(semester_type)', function (data) {
                    console.info(data);
                });
                form.on('select(knowledges_type)', function (data) {
                    console.info(data)
                })
                form.render();

            });
        }
    });


</script>
</body>

</html>